<template>
  <div id="shoppingmall">
    <!-- 隐藏的头部 -->
    <div class="hide" v-if="done">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @click="goTosearch"
      >
        <template #action>
          <van-icon name="star" />
        </template>
      </van-search>
    </div>

    <!-- 渐变的颜色 -->
    <div class="gradual">
      <!-- 头部 -->
      <div class="top">
        <div class="left">
          <van-image
            width="0.4rem"
            height="0.5rem"
            :src="require('../../assets/images/mall1_slices/左上角图标@2x.png')"
          />
          <span>旺田商务楼</span>
          <van-image
            width="0.25rem"
            height="0.2rem"
            :src="require('../../assets/images/mall1_slices/倒三角@2x.png')"
          />
        </div>
        <van-image
          width="0.55rem"
          height="0.5rem"
          :src="require('../../assets/images/mall1_slices/右上角图标@2x.png')"
        />
      </div>

      <!-- 顶部搜索框 -->
      <van-search
        class="top-search"
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        background="transparent"
        @click="goTosearch"
      />

      <!-- 导航栏 -->
      <div class="nav">
        <ul>
          <li v-for="items in navlist" :key="items">
            {{ items }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main">
      <!-- 宫格导航 -->
      <div class="gridnav">
        <van-grid :column-num="5">
          <van-grid-item
            v-for="value in gridnavlist"
            :key="value.text"
            :icon="value.src"
            :text="value.text"
            @click="letsgo(value)"
          />
        </van-grid>
      </div>

      <!-- logotext -->
      <div class="logotext">
        <div class="text">
          <img
            :src="require('../../assets/images/mall1_slices/极速送达@2x.png')"
            alt=""
          />
          <span>极速送达</span>
        </div>
        <div class="text">
          <img
            :src="require('../../assets/images/mall1_slices/极速送达@2x.png')"
            alt=""
          />
          <span>正品保证</span>
        </div>
        <div class="text">
          <img
            :src="require('../../assets/images/mall1_slices/极速送达@2x.png')"
            alt=""
          />
          <span>药监认证</span>
        </div>
      </div>

      <!-- 图片 -->
      <div class="img">
        <img
          :src="require('../../assets/images/mall1_slices/中部banner@2x.png')"
          alt=""
        />
      </div>

      <!-- 智云 -->
      <div class="zhiyun">
        <div class="left">
          <img
            :src="require('../../assets/images/mall1_slices/智云好药房@2x.png')"
            alt=""
          />
        </div>
        <div class="right">
          <img
            :src="require('../../assets/images/mall1_slices/智云严选@2x.png')"
            alt=""
          />
        </div>
      </div>

      <!-- 热门好货 -->
      <div class="hot">
        <h3>热门好货</h3>
        <div class="content">
          <ul>
            <li v-for="item in hotlist" :key="item.title" @click="godetail">
              <!-- :src="
                  require('../../assets/images/mall1_slices/中部banner@2x.png')
                " -->
              <img :src="item.imgUrl" alt="" />
              <div class="textbox">
                <p>{{ item.title }}</p>
                <!-- <em>$24.00</em> -->
                <span>{{ item.price }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 品牌精选 -->
      <div class="brand">
        <h3>品牌精选</h3>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="(value, index) in brandlist"
            :key="index"
            :icon="value.src"
          />
        </van-grid>
      </div>

      <!-- 滚动导航 -->
      <van-tabs v-model:active="active" @click="onClick">
        <van-tab
          v-for="(items, index) in state.navlist"
          :title="items.title"
          :key="index"
          @pullDown="pullDown(idnex)"
        >
          <!-- 下拉加载 -->
          <van-list
            class="wrap"
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="li-wrap">
              <li
                v-for="(item, index) in state.addlist"
                :key="index"
                @click="godetail(index)"
              >
                <div class="img">
                  <img :src="item.imgUrl" alt="" />
                </div>
                <div class="content">
                  <p>{{ item.title }}</p>
                  <span>{{ item.price }}</span>
                  <em>益丰大药房</em>
                </div>
              </li>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { onMounted } from "@vue/runtime-core";
import BScroll from "better-scroll";
import { ref, reactive } from "vue";
import { getMallHotListApi, getnavdruglistApi } from "../../utils/api";
import { useRouter } from "vue-router";
export default {
  setup() {
    const value = ref("");
    const done = ref(false);
    let active = ref(0);
    // 头部导航渲染列表
    const navlist = reactive([
      "藿香正气",
      "四魔汤",
      "钙",
      "感冒",
      "云南白药",
      "二甲双虎",
      "三甲散",
      "999颗粒",
      "科洛夫",
    ]);
    // 宫格导航栏渲染列表
    const gridnavlist = reactive([
      {
        src: require("../../assets/images/mall1_slices/家中常备@2x.png"),
        text: "家中常备",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/口罩器械@2x.png"),
        text: "口罩器械",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/成人情趣@2x.png"),
        text: "成人情趣",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/慢病用药@2x.png"),
        text: "慢病用药",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/家居用品@2x.png"),
        text: "家居用品",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/感冒发热@2x.png"),
        text: "感冒发热",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/肠胃消化@2x.png"),
        text: "肠胃消化",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/滋补养身@2x.png"),
        text: "滋补养身",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/儿童用药@2x.png"),
        text: "儿童用药",
        path: "/shoplist",
      },
      {
        src: require("../../assets/images/mall1_slices/全部分类@2x.png"),
        text: "全部分类",
        path: "/shoplist",
      },
    ]);
    const router = useRouter();
    // 搜索点击跳转
    const goTosearch = () => {
      router.push("/homesearch");
    };
    // 宫格点击跳转
    const letsgo = (i) => {
      router.push(i.path);
    };

    // 品牌精选列表
    const brandlist = reactive([
      {
        src: require("../../assets/images/mall1_slices/999@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/广药白云山@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/同仁堂@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/云南白药@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/正大天晴@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/BAYER@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/TAIJI@2x.png"),
      },
      {
        src: require("../../assets/images/mall1_slices/强生@2x.png"),
      },
    ]);
    // 热门好货列表
    let hotlist = ref("");
    // 跳转详情页
    const godetail = () => {
      router.push("/detail");
    };
    // 滚动事件
    const scrollevent = () => {
      if (document.documentElement.scrollTop > 40) {
        done.value = true;
      } else {
        done.value = false;
      }
    };
    // 底部导航列表下拉加载
    const state = reactive({
      navlist: [],
      navchildlist: [],
      addlist: [],
      loading: false,
      finished: false,
    });

    const onClick = () => {
      state.addlist = [];
      state.finished = false;
    };

    // 下拉加载事件
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        state.navchildlist = state.navlist[active.value].children;
        state.addlist.push(...state.navchildlist.splice(-4));
        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.navchildlist.length == 0) {
          state.finished = true;
        }
        // state.finished = true;
      }, 1000);
    };

    // 热门好货数据请求
    const getMallHotListData = async () => {
      const res = await getMallHotListApi();
      hotlist.value = res.result;
    };
    // 底部导航列表数据请求
    const getnavdruglistData = async () => {
      const res = await getnavdruglistApi();
      state.navlist = res.result;
    };
    onMounted(() => {
      // 热门好货数据请求
      getMallHotListData();

      // 底部导航列表数据请求
      getnavdruglistData();
      // 监听滚动事件
      document.addEventListener("scroll", scrollevent);
      new BScroll(".nav", {
        scrollX: true,
        // pullUpLoad: true,
        // scrollbar: true,
        // pullDownRefresh: true,
        // and so on
      });
    });

    return {
      active,
      scrollevent,
      value,
      navlist,
      gridnavlist,
      done,
      brandlist,
      state,
      onLoad,
      hotlist,
      getMallHotListData,
      getnavdruglistData,
      letsgo,
      godetail,
      onClick,
      goTosearch,
      // onSearch,
    };
  },
};
</script>
<style lang="less">
html:root {
  --van-tabs-bottom-bar-color: #1485f9ff;
}
#shoppingmall {
  box-sizing: border-box;
  // padding: 0 11.5px;
  background: #f6f6f6;
  // 隐藏的头部
  .hide {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;

    .van-search__action {
      .van-badge__wrapper {
        font-size: 20px;
        margin: 0 10px;
      }
    }
  }

  // 头部渐变颜色
  .gradual {
    background: linear-gradient(#369aff, #f6f6f6);
    padding: 0 11.5px;

    // 头部
    .top {
      margin-bottom: 10px;
      display: flex;
      height: 50px;
      padding: 0 10px;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          padding: 0 5px;
          height: 15.5px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }

    // 顶部搜索框
    .van-search {
      padding: 0;
      margin-bottom: 10px;
    }

    // 导航栏
    .nav {
      height: 20px;
      width: 350px;
      margin-bottom: 10px;
      display: flex;
      overflow: hidden;

      ul {
        display: flex;

        li {
          font-size: 12px;
          padding: 3px 10px;
          background: #ffffff;
          opacity: 0.4;
          border-radius: 10px;
          margin-right: 5px;
          white-space: nowrap;
        }
      }
    }
  }

  // 主体内容
  .main {
    box-sizing: border-box;
    padding: 0 11.5px;

    // 宫格导航
    .gridnav {
      margin-bottom: 10px;
      width: 352px;
      background: #ffffff;
      border-radius: 10px;
      padding: 5px;

      .van-badge__wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        .van-icon__image {
          width: 40px;
          height: 40px;
        }
      }
    }

    // logotext
    .logotext {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .text {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 19px;
          height: 19px;
        }

        span {
          height: 11.5px;
          line-height: 11.5px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #999999;
        }
      }
    }

    // 图片
    .img {
      margin-bottom: 10px;
      img {
        width: 352px;
        height: 89px;
      }
    }

    // 智云
    .zhiyun {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .left {
        width: 170px;
        height: 102px;
        border-radius: 10px;

        img {
          width: 100%;
        }
      }

      .right {
        width: 170px;
        height: 102px;
        border-radius: 10px;

        img {
          width: 100%;
        }
      }
    }

    // 热门好货
    .hot {
      margin-bottom: 10px;
      width: 354px;
      height: 217px;
      background: #ffffff;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      h3 {
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        padding: 0 12px;
      }

      .content {
        display: flex;
        // overflow: hidden;
        width: 354px;
        height: 172px;

        ul {
          display: flex;
          overflow: auto;
          li {
            display: flex;
            flex-direction: column;
            width: 100px;
            margin: 8px 6px;

            img {
              width: 100px;
              height: 100px;
              margin-bottom: 6px;
            }

            .textbox {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding-bottom: 5px;

              p {
                height: 12px;
                line-height: 12px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                margin: 3px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              em {
                height: 12px;
                line-height: 12px;
                font-size: 9px;
                font-family: PingFang SC;
                font-weight: bold;
                text-decoration: line-through;
                color: #999999;
                margin: 3px 0;
              }

              span {
                height: 12px;
                line-height: 12px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #f50201;
                margin: 3px 0;
              }
            }
          }
        }
      }
    }

    // 品牌精选
    .brand {
      margin-bottom: 10px;
      width: 354px;
      height: 177px;
      background: #ffffff;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      h3 {
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        padding: 0 12px;
      }

      .van-grid-item {
        width: 82px;
        height: 60px;

        .van-grid-item__content {
          width: 100%;
          height: 100%;
          .van-icon__image {
            width: 100%;
            height: 60px;
          }
        }
      }
    }

    // 滚动导航
    .van-tabs {
      // 上——导航部分
      .van-tabs__nav {
        background: transparent;
        color: #1485f9ff;

        .van-tab--active {
          color: #1485f9ff;
        }
      }

      // 下——内容部分
      .van-tabs__content {
        .li-wrap {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 171px;
            height: 287px;
            border-radius: 10px;
            background: #fff;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: start;

            .img {
              width: 170px;
              height: 170px;
              display: flex;
              align-items: center;
              img {
                width: 100%;
                height: 100%;
              }
            }

            .content {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding: 0 10px;
              flex: 1;

              p {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 16px;
              }

              span {
                height: 12px;
                font-size: 15px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #fc0909;
                line-height: 12px;
              }

              em {
                height: 12px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #999999;
                line-height: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
